<template>
	<view>
		<cu-custom :bgColor="'bg-' + theme.backgroundColor" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">红包回滚记录</block>
		</cu-custom>
		<!-- <view>
			<view class="search bg-white m-all20 border-radius">
				<view class="icon cuIcon-search mt20 mb20 ml20"></view>
				<view class="input mt20 mb20">
					<input v-model="phone" clear :maxlength="11" type="text" placeholder="请输入手机号" />
				</view>
				<view class="btn" @tap.stop="search">搜索</view>
			</view>
		</view> -->
		<view>
			<view class="cu-list">
				<view
					class="cu-item m-all20 p-all24 bg-white border-radius"
					v-for="(item, index) in tableData"
					:key="index">
					<view class="f36">
						<text>直播间:</text>
						<text>{{ item.liveName }}</text>
					</view>
					<view class="flex justify-between f32 pl20 pr20 mt20">
						<view class="flex1">
							<text>红包金额/人:</text>
							<text class="ml10 text-price text-red">{{ item.rewardNum }}</text>
						</view>
						<view class="flex1">
							<text>红包数量:</text>
							<text class="ml10">{{ item.totalNum }}</text>
						</view>
					</view>
					<view class="flex align-center f32 pl20 pr20 mt20">
						<view class="flex1">
							<text>红包总金额:</text>
							<text class="ml10 text-price text-red">{{ item.totalAmount }}</text>
						</view>
						<view class="flex1">
							<text>回滚金额:</text>
							<text class="ml10 text-price text-red">{{ item.refundReward }}</text>
						</view>
					</view>
				</view>
			</view>
			<view :class="'cu-load bg-gray ' + (loadmore ? 'loading' : 'over')"></view>
		</view>
	</view>
</template>
<script>
const app = getApp();
import util from "utils/util";
import api from "utils/api";
export default {
	data() {
		return {
			theme: app.globalData.theme,
			page: {
				size: 10,
				current: 1,
			},
			phone: "",
			tableData: [],
			loadmore: false,
			liveId: "",
		};
	},
	onLoad(options) {
		this.liveId = options.liveId;
		this.page.current = 1;
		this.tableData = [];
		this.getTableData();
	},
	onReachBottom() {
		if (this.loadmore) {
			this.page.current = this.page.current + 1;
			this.getTableData();
		}
	},
	methods: {
		handleBan(userId) {
			uni.showModal({
				title: "提示",
				content: "确认拉黑用户吗?",
				showCancel: true,
				success: ({ confirm, cancel }) => {
					if (confirm) {
						api
							.liverewardrefundPage({
								liveId: this.liveId,
								userId: userId,
							})
							.then((res) => {
								uni.showToast({
									title: "拉黑成功",
									icon: "none",
								});
								this.page.current = 1;
								this.tableData = [];
								this.getTableData();
							});
					}
				},
			});
		},
		getTableData() {
			this.loadmore = true;
			let para = {
				...this.page,
				phone: this.phone,
				liveId: this.liveId,
			};
			api.liverewardrefundPage(util.filterForm(para)).then((res) => {
				let data = res.data.records;
				this.tableData = [...this.tableData, ...data];
				if (data.length < this.page.size) {
					this.loadmore = false;
				}
			});
		},
	},
};
</script>
<style lang="scss" scoped>
.search {
	display: flex;
	align-items: center;
	border-radius: 50rpx;
	.input {
		flex: 1;
		margin: 0 20rpx;
		input {
			min-height: 70rpx;
		}
	}
	.btn {
		padding: 0 40rpx;
		margin: 10rpx 0;
		margin-right: 10rpx;
		color: #fff;
		height: 70rpx;
		background-color: #007aff;
		border-radius: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
.headingImg {
	width: 120rpx;
	height: 120rpx;
	image {
		width: 100%;
		height: 100%;
	}
}
.userInfo {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
</style>
